<template>
  <div class="app-container">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Edit :infoid="id" :read-only="readOnly" :timestamp="timestamp" :step="step" @dialogHide="dialogHide($event)" />
    </el-dialog>
    <el-dialog
      title="转知识库"
      :visible.sync="knowledgeVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <knowledge :infoid="id" :timestamp="timestamp" @dialogHide="dialogHide($event)" />
    </el-dialog>

    <div class="filter-container">
      <div style="float:left;">
        <el-input v-model="listQuery.submitUser" placeholder="请输入案件号" style="width: 200px;margin-left: 10px;" class="filter-item" />
        <el-input v-model="listQuery.submitUser" placeholder="请输入案件名称关键词" style="width: 200px;margin-left: 10px;" class="filter-item" />
        <el-select v-model="listQuery.classCode" placeholder="请选择状态" clearable style="margin-left: 10px;width: 200px" class="filter-item">
          <el-option label="全部" value="" />
          <el-option v-for="(it,index) in classList" :key="index" :label="it.label" :value="it.value" />
        </el-select>
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <el-button class="filter-item" type="success" icon="el-icon-edit" style="margin-left: 10px;float:right" @click="addnew">
        立案侦查
      </el-button>
      <!-- <el-popconfirm v-if="roleEdit" title="确定批量删除所选信息吗？" style="margin-left:10px;float:right" @onConfirm="deleteData()">
        <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
      </el-popconfirm> -->
    </div>
    <template v-if="status==='待处理'">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->

        <el-table-column align="center" prop="order_no" label="案件号" width="100px" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>

        <el-table-column min-width="80px" prop="priority" label="案件名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.priorityText }}</span>
          </template>
        </el-table-column>
        <el-table-column width="110px" prop="submitUser" align="center" label="立案时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column width="110px" prop="submitUser" align="center" label="当前状态" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核查登记90天" header-align="center">
          <el-table-column width="110px" prop="roomNo" align="center" label="开始登记时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column width="110px" prop="telephone" align="center" label="计划结束时间">
            <template slot-scope="scope">
              <span>{{ scope.row.limitDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="负责人（公安/处非）" prop="faultText" width="160" align="center">
            <template slot-scope="scope">
              {{ scope.row.faultText }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="司法审计90天" header-align="center">
          <el-table-column width="100px" prop="description" label="开审时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最终报告时间" prop="nodeText" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.limitDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="负责人（审计/公司）" prop="flowType" width="160" align="center">
            <template slot-scope="scope">
              {{ scope.row.flowType }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column width="110px" prop="create_date" align="center" label="移送起诉时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column width="150px" prop="replenish" align="center" label="补侦次数及时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.replenish }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="limit_date" align="center" label="办案民警">
          <template slot-scope="scope">
            <span>{{ scope.row.police }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" prop="publish_time" align="center" label="满意度">
        <template slot-scope="scope">
          <span>{{ scope.row.publishTime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->

        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="mod(scope.row)">案件详情</el-button>
            <el-button size="small" type="success" @click="mod(scope.row)">移送审查起诉</el-button>
            <el-button size="small" type="danger" @click="mod(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
    <template v-else-if="status==='已处理'">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list2"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="roleEdit" type="selection" width="50" align="center" />

        <el-table-column align="center" prop="order_no" label="单号" width="120px" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>

        <el-table-column width="110px" prop="priority" align="center" label="响应级别" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.priorityText }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="submitUser" align="center" label="报修人">
          <template slot-scope="scope">
            <span>{{ scope.row.submitUser }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="roomNo" align="center" label="房间">
          <template slot-scope="scope">
            <span>{{ scope.row.roomNo }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120px" prop="telephone" align="center" label="电话">
          <template slot-scope="scope">
            <span>{{ scope.row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="故障类型" prop="faultText" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.faultText }}
          </template>
        </el-table-column>
        <el-table-column min-width="200px" prop="description" label="问题描述" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ replaceHtml(scope.row.description) }}
          </template>
        </el-table-column>
        <el-table-column label="流程名称" prop="flowType" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.flowType===1?'需要审批':'不需要审批' }}
          </template>
        </el-table-column>
        <el-table-column width="160px" prop="create_date" align="center" label="创建时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" prop="limit_date" align="center" label="限时完成时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.limitDate }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" prop="publish_time" align="center" label="满意度">
        <template slot-scope="scope">
          <span>{{ scope.row.publishTime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->

        <el-table-column align="center" label="操作" width="350">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-search" @click="detail(scope.row.workOrderId)">
              查看
            </el-button>
            <!-- <el-popconfirm v-if="roleEdit" title="确定删除该信息吗？" style="margin-left:10px;" @onConfirm="deleteData(scope.row.id)">
            <el-button slot="reference" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
          <el-button v-if="selection" type="warning" size="small" icon="el-icon-success" style="margin-left:10px;" @click="selectInfo(scope.row)">
            选取
          </el-button> -->
            <el-popconfirm v-if="showThansferBtn" title="确定要将该问题单转到问题库吗？" style="margin:0 10px;" @onConfirm="saveToQuestion(scope.row.workOrderId)">
              <el-button slot="reference" :disabled="!!scope.row.transferQuestion" type="primary" size="small" icon="el-icon-collection">
                转问题库
              </el-button>
            </el-popconfirm>
            <el-button v-if="showThansferBtn" :disabled="!!scope.row.transferKnowledge" type="success" size="small" icon="el-icon-notebook-1" @click="knowledge(scope.row.workOrderId)">
              转知识库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList2" />
    </template>
    <template v-else>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list3"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="roleEdit" type="selection" width="50" align="center" />

        <el-table-column align="center" prop="order_no" label="单号" width="120px" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>

        <el-table-column width="110px" prop="priority" align="center" label="响应级别" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.priorityText }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="submitUser" align="center" label="报修人">
          <template slot-scope="scope">
            <span>{{ scope.row.submitUser }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="roomNo" align="center" label="房间">
          <template slot-scope="scope">
            <span>{{ scope.row.roomNo }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120px" prop="telephone" align="center" label="电话">
          <template slot-scope="scope">
            <span>{{ scope.row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="故障类型" prop="faultText" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.faultText }}
          </template>
        </el-table-column>
        <el-table-column min-width="200px" prop="description" label="问题描述" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ replaceHtml(scope.row.description) }}
          </template>
        </el-table-column>
        <el-table-column label="流程名称" prop="flowType" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.flowType===1?'需要审批':'不需要审批' }}
          </template>
        </el-table-column>
        <el-table-column width="160px" prop="create_date" align="center" label="创建时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" prop="limit_date" align="center" label="限时完成时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.limitDate }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column width="100px" prop="publish_time" align="center" label="满意度">
        <template slot-scope="scope">
          <span>{{ scope.row.publishTime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->

        <el-table-column align="center" label="操作" width="350">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-search" @click="detail(scope.row.id)">
              查看
            </el-button>
            <!-- <el-popconfirm v-if="roleEdit" title="确定删除该信息吗？" style="margin-left:10px;" @onConfirm="deleteData(scope.row.id)">
            <el-button slot="reference" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
          <el-button v-if="selection" type="warning" size="small" icon="el-icon-success" style="margin-left:10px;" @click="selectInfo(scope.row)">
            选取
          </el-button> -->
            <el-popconfirm v-if="showThansferBtn" title="确定要将该问题单转到问题库吗？" style="margin:0 10px;" @onConfirm="saveToQuestion(scope.row.id)">
              <el-button slot="reference" :disabled="!!scope.row.transferQuestion" type="primary" size="small" icon="el-icon-collection">
                转问题库
              </el-button>
            </el-popconfirm>
            <el-button v-if="showThansferBtn" :disabled="!!scope.row.transferKnowledge" type="success" size="small" icon="el-icon-notebook-1" @click="knowledge(scope.row.id)">
              转知识库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList3" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Edit from './edit'
import knowledge from './components/knowledge'

export default {
  name: 'ArticleList',
  components: { Pagination, Edit, knowledge },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    isSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showAddBtn: false,
      status: '待处理',
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      classList: [],
      classForm: {
        parentClass: 14,
        label: ''
      },
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      readOnly: false,
      timestamp: false,
      list: [
        {
          'workOrderId': 47,
          'processId': 315,
          'orderNo': '20210001',
          'nodeText': '分配工单',
          'roomNo': '101',
          'faultText': '张某/李某',
          'priorityText': '测试案件',
          'submitUser': '林伯强',
          'createDate': '2021-05-07',
          'limitDate': '2021-06-07',
          'description': '<p>qqq</p>',
          'telephone': '13112345678',
          'flowType': '王某/某会计师事务所',
          'replenish': '2021-06-07 第一次',
          status: '立案侦查',
          police: '周某'
        }
      ],
      list2: [],
      list3: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: '',
      step: '',
      showThansferBtn: false,
      knowledgeVisible: false
    }
  },
  watch: {
    isEdit: {
      handler(val) {
        console.log('isEdit:' + val)
        this.roleEdit = val
      },
      immediate: true
    },
    isSelection: {
      handler(val) {
        console.log('isSelection:' + val)
        this.selection = val
      },
      immediate: true
    }
  },
  mounted() {
    if (JSON.parse(localStorage.getItem('user')).auths.includes('AUTH_input')) {
      this.showAddBtn = true
    } else {
      this.showAddBtn = false
    }
  },
  created() {
    this.getList()
    if (JSON.parse(localStorage.getItem('user')).auths.includes('AUTH_close')) {
      this.showThansferBtn = true
    } else {
      this.showThansferBtn = false
    }
  },
  methods: {
    changelist() {
      this.listQuery.page = 1
      if (this.status === '待处理') {
        this.getList()
      }
      if (this.status === '已处理') {
        this.getList2()
      }
      if (this.status === '全部') {
        this.getList3()
      }
    },
    replaceHtml(str) {
      if (str && str !== '') {
        var re = new RegExp('<[^<>]+>', 'g')
        var text1 = str.replace(re, '')
        return text1
      } else {
        return str
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteData(id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      if (ids.length > 0) {
        this.$http
          .post('/api/workOrder/remove', { ids: ids })
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            } else {
              console.log('删除失败:' + response.data.message)
              this.$message({
                message: '删除失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$message({
          message: '请至少选择一条信息',
          type: 'danger'
        })
      }
    },
    saveToQuestion(id) {
      this.$http
        .post('/api/workOrder/saveToQuestion', { orderId: id })
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    detail(id) {
      this.id = id
      this.readOnly = true
      this.dialogtitle = '查看'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'detail'
    },
    knowledge(id) {
      this.id = id
      this.knowledgeVisible = true
      this.timestamp = new Date().getTime()
    },
    addnew() {
      this.id = 0
      this.readOnly = false
      this.dialogtitle = '立案侦查'
      this.dialogtitle = '详情'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'create'
    },
    edit(id) {
      this.id = id
      this.readOnly = false
      this.dialogtitle = '编辑'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    dialogHide(flag) {
      this.dialogVisible = false
      this.knowledgeVisible = false
      this.getList()
      this.getList2()
    },
    getList() {
      const para = {
        classCode: this.listQuery.classCode,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      this.listLoading = true
      this.$http
        .post('/api/workOrder/todoPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            // this.list = response.data.result.records
            this.total = response.data.result.total
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    },
    getList2() {
      const para = {
        classCode: this.listQuery.classCode,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      this.listLoading = true
      this.$http
        .post('/api/workOrder/completedPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list2 = response.data.result.records
            this.total = response.data.result.total
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    },
    getList3() {
      const para = {
        classCode: this.listQuery.classCode,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      this.listLoading = true
      this.$http
        .post('/api/workOrder/page', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list3 = response.data.result.records
            this.total = response.data.result.total
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
